<template>
  <div class="device-data">
    <div class="right-data">
      <div class="main-box" >
        <div v-show="showTypes.includes('first')" class="part-title" id="first">
          {{$t('deviceData.navs.deviceInfo')}}
          <span :style="{'color':deviceData.inline===1?'':'#aaa'}" class="state">[{{ deviceData.inline===1?$t('deviceData.status.online'):$t('deviceData.status.offline') }}]</span>
          <span v-if="deviceData.inline!==1&&deviceData.offlineTime" style="color:#aaa" class="state">{{$t('deviceData.status.offlineTime')}}：{{ deviceData.offlineTime }}</span>
        </div>
        <div v-show="showTypes.includes('first')" class="sensor-list">
          <!-- 信号指数 -->
          <div class="sensor-item" v-show="constList.signal.show">
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/net4G.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.signal')}}</div>
                <div>{{constList.signal.updateTime}}</div>
              </div>
            </div>
            <div class="item-value">{{ constList.signal.value+constList.signal.unit }}</div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
         <!-- 软件版本号 -->
          <div class="sensor-item " v-show="constList.version.show">
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/connectType.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.softwareVersion')}}</div>
              </div>
            </div>
            <div class="item-value">{{ deviceData.version }}</div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 硬件版本号 -->
          <div class="sensor-item" v-show="constList.hardwareVersion.show">
            <div class="item-info">
              <div class="item-icon" >
                <img src="../../../assets/icons/sensor_icon/connectType.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.hardwareVersion')}}</div>
              </div>
            </div>
            <div class="item-value">{{ deviceData.hardwareVersion }}</div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 物联网卡号 -->
          <div class="sensor-item" v-show="constList.iccId.show" >
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/phoneNum.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.ioTCardNumber')}}</div>
              </div>
            </div>
            <div class="item-value">{{ deviceData.iccId }}</div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 国际移动设备识别码 -->
          <div class="sensor-item" v-show="constList.imei.show">
            <div class="item-info">
              <div class="item-icon" >
                <img src="../../../assets/icons/sensor_icon/device.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{ $t('deviceData.imei') }}</div>
              </div>
            </div>
            <div class="item-value">{{ deviceData.imei }}</div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 出厂日期 -->
          <div class="sensor-item">
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/outDate.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.manufacturingDate')}}</div>
              </div>
            </div>
            <div class="item-value">{{ deviceData.createTime }}</div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 更新任务 -->
          <div class="sensor-item" v-if="deviceData.configTask">
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/set.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.updateTask')}}</div>
              </div>
            </div>
            <div class="item-value">
              <el-button style="background-color:#03c2c2;color:#fff" :loading="loading[deviceData.id]" @click="updateConfigTask">{{$t('common.confirm')}}</el-button>
            </div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 更新数据 -->
          <div class="sensor-item">
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/set.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.updateData')}}</div>
              </div>
            </div>
            <div class="item-value">
              <el-button style="background-color:#03c2c2;color:#fff" :loading="loading[deviceData.id]" @click="updateDeviceData">{{$t('common.confirm')}}</el-button>
            </div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
          <!-- 时间同步 -->
          <div class="sensor-item">
            <div class="item-info">
              <div class="item-icon">
                <img src="../../../assets/icons/sensor_icon/set.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div>{{$t('deviceData.calibrateTime')}}</div>
              </div>
            </div>
            <div class="item-value">
              <el-button size="small" slot="reference" class="active-btn" :loading="syncing" @click="handleSyncTime" >{{$t('deviceData.calibrate')}}</el-button>
            </div>
            <div class="item-desc">
              <span></span>
              <span style="float: right;"></span>
            </div>
          </div>
        </div>
        <!-- <div v-show="showTypes.includes('second')" class="part-title" id="second" style="margin-top: 0px;"> -->
          <!-- <span>数据映射</span> -->
          <!-- <el-button v-hasPermi="['data:deviceData:manager']" class="add-sensor-btn" icon="el-icon-plus" size="mini" @click="handleAddSensor('0',deviceData.seriesId,deviceData.deviceTypeId)" circle></el-button>
          <el-button v-hasPermi="['data:deviceData:manager']" class="rem-sensor-btn" icon="el-icon-remove" size="mini" @click="handleDeleteDeviceSensor('0')" circle></el-button> -->
          <!-- <el-radio-group v-model="groups.sjys" size="mini" style="margin-left:20px"  v-if="groupTypes.length > 1">
            <el-radio-button v-for="(item,index) in groupTypes" :key="index" :label="item.value" >{{item.name}}</el-radio-button>
          </el-radio-group> -->
        <!-- </div> -->
        <div v-show="showTypes.includes('second')" class="sensor-list">
          <div :class="['sensor-item',item.currentAlarm>0?'alarming':'',item.children.length>0?'big':'']" v-show="groups.sjys===''||groups.sjys===item.productCode" v-for="item in sensorList" :key="item.id" @click="showDetail(item)">
            <div class="item-info">
              <div class="item-icon" @click.stop="selectSensorIcon(item)">
                <img :src="getSensorIcon(item.icon)" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg" @click.stop>
                <div v-if="!controllerMap['name'+item.id]&&controllerMap['name'+item.id]!=''"  @click.stop="editSensorName(item)">
                  <div>{{ item.name }}</div>
                  <div style="font-size: 10px;">{{ item.updateTime }}</div>
                </div>
                <div v-else @click.stop >
                  <el-input :placeholder="$t('common.nameInputHint')" v-model="controllerMap['name'+item.id]">
                    <template slot="append">
                      <el-button icon="el-icon-check" @click.stop="confirmSensorName(item)"></el-button>
                      <el-button icon="el-icon-close"  @click.stop="cancelEditName(item)"></el-button>
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
            <div v-if="item.children.length<=0" class="item-value">
              {{ (item.displayValue||item.displayValue===0)?(item.displayValue):''||((item.flagValue||item.flagValue===0)?(item.flagValue):'')}}
              <div class="item-unit">{{ (item.displayValue||item.displayValue===0)?(item.displayUnit):''||((item.flagValue||item.flagValue===0)?(item.unit):'')}}</div>
            </div>
            <div v-if="item.children.length<=0" class="item-desc">
              <span v-show="item.frequency">{{  $t("deviceData.frequency")+' '+item.frequency }}</span>
              <span style="float: right;" v-show="item.maxValue">{{item.minValue}} - {{ item.maxValue }}</span>
            </div>
            <div v-if="item.children.length>0" class="items-wrap">
              <div :class="['sensor-item',sub.currentAlarm>0?'alarming':'']" v-for="(sub,sub_key) in item.children" :key="sub_key" @click.stop="showDetail(sub)">
                <div class="item-info">
                  <div class="item-icon">
                    <img :src="getSensorIcon(sub.icon)" style="width: 100%;height: 100%;" alt="">
                  </div>
                  <div class="item-msg" @click.stop>
                    <div>
                      <div>{{ sub.name }}</div>
                      <div style="font-size: 10px;">{{ sub.updateTime }}</div>
                    </div>
                  </div>
                </div>
                <div class="item-value">{{ (sub.displayValue||sub.displayValue===0)?(sub.displayValue+sub.displayUnit):''||((sub.flagValue||sub.flagValue===0)?(sub.flagValue+sub.unit):'')}}</div>
                <div class="item-desc">
                  <span v-show="sub.frequency">{{ $t("deviceData.frequency")+' '+sub.frequency }}</span>
                  <span style="float: right;" v-show="sub.maxValue">{{sub.minValue}} - {{ sub.maxValue }}</span>
                </div>
                <svg class="alarm-icon" aria-hidden="true" v-if="sub.alarmTotal>0">
                  <use xlink:href="#icon-alarm" />
                </svg>
              </div>
            </div>
            <svg class="alarm-icon" aria-hidden="true" v-if="item.alarmTotal>0">
              <use xlink:href="#icon-alarm" />
            </svg>
          </div>
        </div>
        <!-- <div v-show="showTypes.includes('third')" class="part-title" id="third" style="margin-top: 20px;">
          <span>组合任务</span>
          <el-button v-hasPermi="['data:deviceData:manager']" class="add-sensor-btn" icon="el-icon-plus" size="mini" @click="setControlGroup(deviceData.seriesId)" circle></el-button>
        </div> -->
        <!-- <div v-show="showTypes.includes('third')" class="sensor-list">
          <div class="sensor-item wrap-type" v-for="item in deviceData.mergeControlList" :key="item.id" >
            <div class="item-info">
              <div class="item-msg">
                <div>{{item.name}}</div>
              </div>
            </div>
            <div class="item-value">
              <div class="sensor-item" v-for="sub in item.mergeSensorVos" :key="sub.id">
                <div class="item-info">
                  <div class="item-icon">
                    <img :src="getSensorIcon(sub.sensorVo.icon)" style="width: 100%;height: 100%;" alt="">
                  </div>
                  <div class="item-msg">
                    <div>{{sub.sensorVo.name}}</div>
                  </div>
                </div>
                <div class="item-value">
                  <span v-if="sub.sensorVo.displayModel==='time_interval'">{{ (JSON.parse(sub.flagValue)).value1+'-'+(JSON.parse(sub.flagValue)).value2 }}</span>
                  <span v-else-if="sub.sensorVo.displayModel==='display_time_switch'">{{ ((JSON.parse(sub.flagValue)).time||'')+' - '+(getGroupItemValue(sub.flagValue,sub.sensorVo.commandList)) }}</span>
                  <span v-else-if="sub.sensorVo.displayModel==='control_ratio'">{{ getGroupItemValue(sub.flagValue,sub.sensorVo.commandList) }}</span>
                  <span v-else >{{ (JSON.parse(sub.flagValue)).value1 }}</span>
                </div>
                <div class="item-desc">
                  <span></span>
                  <span style="float: right;"></span>
                </div>
              </div>
            </div>
            <div class="item-wrap-btn">
              <el-button size="small" type="danger" @click.stop="delGroupItem(item)" v-hasPermi="['data:deviceData:manager']">删 除</el-button>
              <el-button size="small" @click.stop="editGroupItem(item)" v-hasPermi="['data:deviceData:manager']">编 辑</el-button>
              <el-popconfirm
                style="margin: 5px;"
                cancel-button-type="info"
                :title="'是否确认操作 '+item.name+' ？'"
                @confirm="handleGroupSubmit(item)"
                >
                <el-button size="small" slot="reference" :loading="loading[item.id]" class="active-btn"  >执 行</el-button>
              </el-popconfirm>
            </div>
          </div>
        </div> -->
        <div v-show="showTypes.includes('fourth')" class="part-title" id="fourth">
          <!-- <span>控制功能</span> -->
          <!-- <el-button v-hasPermi="['data:deviceData:manager']" class="add-sensor-btn" icon="el-icon-plus" size="mini"  @click="handleAddSensor('1',deviceData.seriesId,deviceData.deviceTypeId)"  circle></el-button>
          <el-button v-hasPermi="['data:deviceData:manager']" class="rem-sensor-btn" icon="el-icon-remove" size="mini" @click="handleDeleteDeviceSensor('1')" circle></el-button> -->
          <el-radio-group v-model="groups.kzgn" size="mini" style="margin-left:40px" v-if="groupTypes.length > 1">
            <el-radio-button v-for="(item,index) in groupTypes" :key="index" :label="item.value" >{{item.name}}</el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="showTypes.includes('fourth')" class="sensor-list">
          <div v-show="groups.kzgn===''||groups.kzgn===item.productCode" :class="['sensor-item',['control_ratio','time_interval','display_time_switch'].includes(item.displayModel)?'middle':'']"
          v-for="item in controllerList" :key="item.id" @click="showDetail(item)">
            <div class="item-info">
              <div class="item-icon" @click.stop="selectSensorIcon(item)">
                <img :src="getSensorIcon(item.icon)" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div v-if="controllerMap['name'+item.id]||controllerMap['name'+item.id]===''" @click.stop >
                  <el-input :placeholder="$t('common.nameInputHint')" v-model="controllerMap['name'+item.id]">
                    <template slot="append">
                      <el-button icon="el-icon-check" @click.stop="confirmSensorName(item)"></el-button>
                      <el-button icon="el-icon-close"  @click.stop="cancelEditName(item)"></el-button>
                    </template>
                  </el-input>
                </div>
                <div v-else  @click.stop="editSensorName(item)">
                  <div>{{ item.name }}</div>
                  <div style="font-size: 10px;">{{ item.updateTime }}</div>
                </div>
              </div>
              <el-tooltip v-if="item.illustrate" :content="item.illustrate" placement="top">
                <i class="el-icon-question tips" style="vertical-align: middle;"></i>
              </el-tooltip>
            </div>
            <div class="item-value">
              <div v-if="item.displayModel==='time_interval'" @click.stop>
                <el-time-picker
                  is-range
                  v-model="controllerMap[item.id]"
                  value-format="HH:mm:ss"
                  :range-separator="$t('common.to')"
                  :start-placeholder="$t('common.startDate')"
                  :end-placeholder="$t('common.endDate')">
                </el-time-picker>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]" @click="resetTooltip" >{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='control_ratio'" @click.stop>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  v-for="sub in item.commandList"
                  :key="sub.id"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item,sub.value)"
                  >
                  <el-button size="small" slot="reference" :class="[sub.value===controllerMap[item.id]?'active-btn':'']" :loading="loading[item.id]" @click="resetTooltip"  >{{ sub.name }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='control_btn'" @click.stop>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]" @click="resetTooltip" >{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='control_slider'" @click.stop>
                <el-input-number v-model="controllerMap[item.id]" style="width: 150px;" :min="parseInt(item.valueStart)" :max="parseInt(item.valueEnd)"  controls-position="right" ></el-input-number >
                <span class="value-unit" v-if="item.unit">{{ item.unit }}</span>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]"  @click="resetTooltip">{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='custom_btn'" @click.stop>
                <el-input v-model="controllerMap[item.id]" style="width: 200px;"  >
                  <el-button slot="append" v-if="item.unit">{{ item.unit }}</el-button>
                </el-input>
                <!-- <span class="value-unit" v-if="item.unit">{{ item.unit }}</span> -->
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]"  @click="resetTooltip">{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='display_time_switch'" @click.stop>
                <el-time-picker
                  :disabled = "item.running"
                  v-model="controllerMap['time'+item.id]"
                  :default-value="new Date(0, 0, 0, 0, 0, 10)"
                  :placeholder="this.$t('deviceData.prompt.selectDuration')">
                </el-time-picker>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  v-for="sub in item.commandList"
                  :key="sub.id"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item,sub.value)"
                  >
                  <el-button :disabled = "item.running&&sub.value===controllerMap[item.id]" size="small" slot="reference" :class="[sub.value===controllerMap[item.id]?'active-btn':'']" :loading="loading[item.id]" @click="resetTooltip"  >{{ sub.name }}</el-button>
                </el-popconfirm>
              </div>
            </div>
            <div class="item-desc">
              <div class="countdown" v-if="item.running&&durations[item.id]>0">
                倒计时：{{ returnHMS(durations[item.id]) }}
                <div class="count-style">
                  <div class="count-style-inner" :style="{'width':(durations[item.id]/parseInt(item.durationTotal))*100+'%'}"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="sensor-item add" @click="handleAddSensor('1',deviceData.seriesId)" >
            <i class="el-icon-plus"></i>
          </div> -->
        </div>
        <div v-show="showTypes.includes('fifth')" class="part-title" id="fourth" v-hasPermi="['data:deviceData:manager']">
          <!-- <span>功能设置</span>
          <el-button v-hasPermi="['data:deviceData:manager']" class="add-sensor-btn" icon="el-icon-plus" size="mini"  @click="handleAddSensor('2',deviceData.seriesId,deviceData.deviceTypeId)"  circle></el-button>
          <el-button v-hasPermi="['data:deviceData:manager']" class="rem-sensor-btn" icon="el-icon-remove" size="mini" @click="handleDeleteDeviceSensor('2')" circle></el-button> -->
          <el-radio-group v-model="groups.gnsz" size="mini" style="margin-left:20px"  v-if="groupTypes.length > 1">
            <el-radio-button v-for="(item,index) in groupTypes" :key="index" :label="item.value" >{{item.name}}</el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="showTypes.includes('fifth')" class="sensor-list" v-hasPermi="['data:deviceData:manager']">
          <div v-show="groups.gnsz===''||groups.gnsz===item.productCode" :class="['sensor-item',['control_ratio','time_interval','display_time_switch'].includes(item.displayModel)?'middle':'']"
          v-for="item in setterList" :key="item.id" @click="showDetail(item)">
            <div class="item-info">
              <div class="item-icon" @click.stop="selectSensorIcon(item)">
                <img :src="getSensorIcon(item.icon)" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="item-msg">
                <div v-if="controllerMap['name'+item.id]||controllerMap['name'+item.id]===''" @click.stop >
                  <el-input placeholder="请输入名称" v-model="controllerMap['name'+item.id]">
                    <template slot="append">
                      <el-button icon="el-icon-check" @click.stop="confirmSensorName(item)"></el-button>
                      <el-button icon="el-icon-close"  @click.stop="cancelEditName(item)"></el-button>
                    </template>
                  </el-input>
                </div>
                <div v-else  @click.stop="editSensorName(item)">
                  <div>{{ item.name }}</div>
                  <div style="font-size: 10px;">{{ item.updateTime }}</div>
                </div>
              </div>
              <el-tooltip v-if="item.illustrate" :content="item.illustrate" placement="top">
                <i class="el-icon-question tips" style="vertical-align: middle;"></i>
              </el-tooltip>
            </div>
            <div class="item-value">
              <div v-if="item.displayModel==='time_interval'" @click.stop>
                <el-time-picker
                  is-range
                  v-model="controllerMap[item.id]"
                  value-format="HH:mm:ss"
                  :range-separator="$t('common.to')"
                  :start-placeholder="$t('common.startDate')"
                  :end-placeholder="$t('common.endDate')">
                </el-time-picker>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]" @click="resetTooltip" >{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='control_ratio'" @click.stop>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  v-for="sub in item.commandList"
                  :key="sub.id"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item,sub.value)"
                  >
                  <el-button size="small" slot="reference" :class="[sub.value===controllerMap[item.id]?'active-btn':'']" :loading="loading[item.id]" @click="resetTooltip"  >{{ sub.name }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='control_btn'" @click.stop>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]" @click="resetTooltip" >{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='control_slider'" @click.stop>
                <el-input-number v-model="controllerMap[item.id]" style="width: 150px;" :min="parseInt(item.valueStart)" :max="parseInt(item.valueEnd)"  controls-position="right" ></el-input-number >
                <span class="value-unit" v-if="item.unit">{{ item.unit }}</span>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]"  @click="resetTooltip">{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='custom_btn'" @click.stop>
                <el-input v-model="controllerMap[item.id]" style="width: 200px;"  >
                  <el-button slot="append" v-if="item.unit">{{ item.unit }}</el-button>
                </el-input>
                <!-- <span class="value-unit" v-if="item.unit">{{ item.unit }}</span> -->
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item)"
                  >
                  <el-button size="small" slot="reference" class="active-btn" :loading="loading[item.id]"  @click="resetTooltip">{{ $t('common.confirm') }}</el-button>
                </el-popconfirm>
              </div>
              <div v-if="item.displayModel==='display_time_switch'" @click.stop>
                <el-time-picker
                  :disabled = "item.running"
                  v-model="controllerMap['time'+item.id]"
                  :default-value="new Date(0, 0, 0, 0, 0, 10)"
                  :placeholder="this.$t('deviceData.prompt.selectDuration')">
                </el-time-picker>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  v-for="sub in item.commandList"
                  :key="sub.id"
                  :title="$t('deviceData.prompt.operation',{'name':item.name})"
                  @confirm="comfirmClick(item,sub.value)"
                  >
                  <el-button :disabled = "item.running&&sub.value===controllerMap[item.id]" size="small" slot="reference" :class="[sub.value===controllerMap[item.id]?'active-btn':'']" :loading="loading[item.id]" @click="resetTooltip"  >{{ sub.name }}</el-button>
                </el-popconfirm>
              </div>
            </div>
            <div class="item-desc">
              <div class="countdown" v-if="item.running&&durations[item.id]>0">
                倒计时：{{ returnHMS(durations[item.id]) }}
                <div class="count-style">
                  <div class="count-style-inner" :style="{'width':(durations[item.id]/parseInt(item.duration))*100+'%'}"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备图标 -->
    <el-dialog :title="$t('deviceData.selectIcon')" :visible.sync="deviceIconOpen" width="800px" append-to-body>
      <div>
        <device-icon :target="targetDeviceIcon" @change="onDeviceIconChange"></device-icon>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDeviceIconSelect" :disabled="!targetDeviceIcon">{{$t('common.confirm')}}</el-button>
        <el-button @click="deviceIconOpen=false">{{$t('common.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 传感器图标 -->
    <el-dialog :title="$t('deviceData.selectIcon')" :visible.sync="open" width="800px" append-to-body >
      <div>
        <Icon :target="targetSensorIcon" @change="onSensorIconChange"></Icon>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSensorIconSelect" :disabled="!targetSensorIcon">{{$t('common.confirm')}}</el-button>
        <el-button @click="open=false">{{$t('common.cancel')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="detail" width="94%" append-to-body :close-on-click-modal="false" >
      <el-tabs v-model="activeName" >
        <el-tab-pane :label="$t('deviceData.popup.infos')" name="first">
          <div class="popup-table">
            <el-descriptions  :column="3" size="medium" border>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.productCategory')}}</template>
                <el-cascader v-model="productIds" :options="productOptions" :props="{ checkStrictly: true }" clearable disabled></el-cascader>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.serialPort')}}</template>
                {{tableData.name}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.serialPortFlag')}}</template>
                {{ tableData.flag }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.flag')}}</template>
                {{ tableData.fixedFlag }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.value')}}</template>
                {{ (tableData.displayValue||tableData.displayValue===0)?(tableData.displayValue+tableData.displayUnit):''||(tableData.flagValue||tableData.flagValue===0)?(tableData.flagValue+tableData.unit):'' }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.unit')}}</template>
                {{ tableData.unit }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">{{$t('deviceData.popup.operation')}}</template>
                <div>
                  <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-open"
                  v-show="tableData.sensorType==='0'"
                  v-hasPermi="['data:deviceData:clear']"
                  @click="handleClearData(tableData)"
                >{{$t('deviceData.popup.clearData')}}</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-hasPermi="['data:deviceData:manager']"
                  @click="handleEditSensor(tableData)"
                >{{$t('common.modify')}}</el-button>
                <el-popconfirm
                  style="margin: 5px;"
                  cancel-button-type="info"
                  :title="$t('deviceData.popup.deleteComfirm',{name:tableData.name})"
                  @confirm="handleDelSensor(tableData)"
                  >
                  <el-button
                    slot="reference"
                    size="mini"
                    type="text"
                    v-hasPermi="['data:deviceData:manager']"
                    icon="el-icon-delete"
                  >{{$t('common.delete')}}</el-button>
                  <el-button size="small" class="active-btn" >{{$t('common.confirm')}}</el-button>
                </el-popconfirm>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('deviceData.popup.taskConfig')" name="configTask" v-if="deviceData.configTask">
          <sensor-task v-if="detail" :sensorId="tableData.id" :control="tableData.sensorType" :deviceId="tableData.deviceId" ></sensor-task>
        </el-tab-pane>
        <el-tab-pane :label="$t('deviceData.popup.history')" name="second">
          <div v-if="tableData.sensorType==='1'||tableData.sensorType==='2'">
            <device-log v-if="chartParams.sensorId&&chartParams.sensorId" :sensorId="chartParams.sensorId" :deviceId="chartParams.deviceId"></device-log>
          </div>
          <div v-else>
            <el-date-picker
              ref="datePicker"
              v-model="chartDateArea"
              type="daterange"
              :range-separator="$t('common.to')"
              :picker-options="pickerOptions"
              :start-placeholder="$t('common.startDate')"
              :clearable="false"
              :end-placeholder="$t('common.endDate')">
            </el-date-picker>
            <el-button size="small" type="primary" style="margin-left: 10px;" @click="getTrendData" >{{$t('common.search')}}</el-button>
            <el-button size="small" type="primary" style="margin-left: 10px;" @click="downloadTrendData" :disabled="chartData.xData.length == 0">{{$t('common.download')}}</el-button>
            <div style="width: 100%;" v-loading="chartDataLoading" :element-loading-text="$t('common.loading')" >
              <line-chart v-if="activeName==='second'" :chart-data="chartData" style="width: 100%;"></line-chart>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="tableData.sensorType=='0'" :label="$t('deviceData.popup.alarmConfig')" name="third">
          <event v-if="activeName==='third'" :deviceId="deviceData.id" :sensorId="tableData.id" :sensorName="tableData.name" :deviceTypeId="deviceData.deviceTypeId"></event>
        </el-tab-pane>
        <el-tab-pane v-if="tableData.sensorType=='0'" :label="$t('deviceData.popup.alarmLog')" name="fourth">
          <device-alarm v-if="eventParams.sensorId&&eventParams.sensorId" :sensorId="eventParams.sensorId" :deviceId="eventParams.deviceId" :deviceTypeId="deviceData.deviceTypeId"></device-alarm>
        </el-tab-pane>
        <el-tab-pane v-if="tableData.sensorType=='0'" :label="$t('deviceData.popup.dataMapping')" name="fifth" >
          <display v-if="activeName==='fifth'" :deviceId="deviceData.id" :sensorId="tableData.id" :sensorName="tableData.name" :unit="tableData.unit"></display>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- io列表选择 -->
    <el-dialog :title="$t('deviceData.popup.parameterList')" :visible.sync="seriesIoOpen" width="1000px" append-to-body :close-on-click-modal="false">
      <el-table ref="multipleTable" :data="seriesIoList" height="500" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="$t('deviceData.popup.orderNum')"  prop="orderNum" align="center" />
        <el-table-column :label="$t('deviceData.popup.icon')" align="center" prop="icon" width="100">
          <template slot-scope="scope">
            <el-image style="width: 40px; height: 40px" :src="getSensorIcon(scope.row.icon)" fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column :label="$t('deviceData.popup.serialPort')" align="center" prop="name" />
        <el-table-column :label="$t('deviceData.popup.serialPortFlag')" align="center" prop="flag" />
        <el-table-column :label="$t('deviceData.popup.controlType')" align="center" prop="flag" >
          <template slot-scope="scope">
            {{ controlList[scope.row.control]}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('deviceData.popup.operation')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :style="{'color':selection.findIndex(i=>i.id===scope.row.id)>=0?'#aaa':''}"
              @click="toggleSelection(scope.row)"
            >{{selection.findIndex(i=>i.id===scope.row.id)>=0?$t('common.cancelSelect'):$t('common.select')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSelectSensor" :disabled="selection.length<=0" >{{$t('common.confirm')}}</el-button>
        <el-button @click="seriesIoOpen=false">{{$t('common.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 修改串口Io定义对话框 -->
    <el-dialog :title="$t('deviceData.popup.serialPortEditing')" :visible.sync="seriesEditOpen" width="800px" append-to-body :close-on-click-modal="false">
      <el-form ref="seriesIoForm" :model="seriesIoForm" :rules="seriesRules" label-width="135px">
        <el-form-item :label="$t('deviceData.popup.productCategory')" prop="productIds">
          <el-cascader v-model="productIds" :options="productOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.serialPort')" prop="name">
          <el-input v-model="seriesIoForm.name" :placeholder="$t('deviceData.popup.serialPort')" />
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.serialPortFlag')" prop="flag">
          <el-input v-model="seriesIoForm.flag" :placeholder="$t('deviceData.popup.serialPortFlag')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.flag')" prop="fixedFlag">
          <el-input v-model="seriesIoForm.fixedFlag" :placeholder="$t('deviceData.popup.flag')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.calculation')" prop="calc"  v-if="seriesIoForm.sensorType == '0'">
          <el-input v-model="seriesIoForm.calc" :placeholder="$t('deviceData.popup.calculation')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.channelNumber')" prop="channel">
          <el-input v-model="seriesIoForm.channel" :placeholder="$t('deviceData.popup.channelNumber')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.expression')" prop="expression">
          <el-input type="textarea" v-model="seriesIoForm.valueExpression" :placeholder="$t('deviceData.popup.expression')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.usageDescription')" prop="illustrate">
          <el-input v-model="seriesIoForm.illustrate" :placeholder="$t('deviceData.popup.usageDescription')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.unit')" prop="unit">
          <el-input v-model="seriesIoForm.unit" :placeholder="$t('deviceData.popup.unit')"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.orderNum')" prop="orderNum">
          <el-input-number v-model="seriesIoForm.orderNum" :placeholder="$t('deviceData.popup.orderNum')" :min="1" :max="999"/>
        </el-form-item>
        <el-form-item :label="$t('deviceData.popup.option')" prop="displayModel" v-if="(seriesIoForm.displayModel === 'control_ratio' || seriesIoForm.displayModel === 'control_selector' || seriesIoForm.sensorType == '0')">
          <div class="option-box">
            <el-table
              size="mini"
              :data="optionList"
              border
              style="width: 100%">
              <el-table-column align="center"  :label="$t('deviceData.popup.variableName')">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" :placeholder="$t('deviceData.popup.variableName')" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('deviceData.popup.expression')" v-if="seriesIoForm.sensorType == '0'">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.expression" :placeholder="$t('deviceData.popup.expression')">
                    <el-option
                      v-for="dict in dict.type.display_expression"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('deviceData.popup.variableValue')">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" :placeholder="$t('deviceData.popup.variableValue')" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('deviceData.popup.operation')" width="70" >
                <template slot-scope="scope">
                  <i class="el-icon-delete" style="cursor: pointer;"  @click.stop="delOption(scope.$index,scope.row)"></i>
                </template>
              </el-table-column>
            </el-table>
            <el-button class="add-btn" type="primary" icon="el-icon-plus" style="margin-top: 10px;" v-if="seriesIoForm.flag.startsWith('AUTOCONT')" @click="openDeviceTask"  >使用模板</el-button>
            <el-button class="add-btn" type="primary" icon="el-icon-plus" style="margin-top: 10px;" v-if="seriesIoForm.flag.startsWith('GWTASK')" @click="openGwTask"  >使用模板</el-button>
            <el-button class="add-btn" type="primary" icon="el-icon-plus" style="margin-top: 10px;" @click="addOption"  >{{$t('deviceData.popup.addOptions')}}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveSensor" >{{ $t('common.confirm') }}</el-button>
        <el-button @click="seriesEditOpen=false" >{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>
    <!-- 新增或修改组合控制对话框 -->
    <el-dialog :title="$t('deviceData.popup.taskCombination')" :visible.sync="controlGroupPopup" width="1200px" append-to-body :close-on-click-modal="false">
      <control-group v-if="controlGroupPopup" :dataItem="groupItems" :device="deviceData" @success="onSelectGroupSuccess" @cancel="cancelGroupSelect" ></control-group>
    </el-dialog>
    <!-- 参数设置模板 -->
    <el-dialog :title="$t('deviceData.popup.parameterSettingTemplate')" :visible.sync="deviceTaskVisiabled" width="1200px" append-to-body :close-on-click-modal="false">
      <device-task v-if="deviceTaskVisiabled" :deviceId="activeId" :sensorList="sensorList" :controllerList="controllerList" :seriesIoForm="seriesIoForm" @success="onSelectDeviceTask" @cancel="cancelDeviceTask" ></device-task>
    </el-dialog>
    <!-- 参数设置模板 -->
    <el-dialog :title="$t('deviceData.popup.parameterSettingTemplate')" :visible.sync="gwTaskVisiabled" width="1200px" append-to-body :close-on-click-modal="false">
      <gw-task v-if="gwTaskVisiabled" :deviceId="activeId" :seriesIoForm="seriesIoForm" @success="onSelectGwTask" @cancel="cancelGwTask" ></gw-task>
    </el-dialog>
    <!-- 监听 -->
    <el-dialog :title="$t('deviceData.popup.dataMonitoring')" :visible.sync="dataListenPopup" width="1200px" append-to-body :close-on-click-modal="false">
      <listen v-if="dataListenPopup" :json="listenData"></listen>
    </el-dialog>
    <!-- 设备类型筛选对话框 -->
    <el-dialog :title="$t('deviceData.popup.deviceSelection')" :visible.sync="filterOpen" width="800px" append-to-body>
      <el-form ref="filterForm" :model="filterForm" label-width="120px" >
        <el-form-item :label="$t('deviceData.popup.deviceType')" prop="deviceTypeId">
          <el-select v-model="filterForm.deviceTypeId" :placeholder="$t('deviceData.popup.deviceType')" >
            <el-option v-for="item in deviceTypeList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFilterForm">{{$t('common.confirm')}}</el-button>
        <el-button @click="cancelFilter">{{$t('common.reset')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cache from '@/plugins/cache'
import controlGroup from './group'
import deviceIcon from '@/components/IconDevice/index'
import Icon from '@/components/Icons/index'
import deviceLog from './log'
import deviceTask from './task'
import gwTask from './gw_task'
import deviceAlarm from './alarm'
import lineChart from './LineChart'
import listen from './listen'
import display from './display'
import event from './event'
import sensorTask from './sensorTask'
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deviceTypeOptions } from "@/api/device/deviceType";
import { listDevice,updateDevice, getDevice,updateSensor,deviceCommand,getDeviceData,firmwareUpgrade,upgrade,syncDeviceTime,trendData,deleteDeviceSensor,seriesIoOptions,bindControlSensor,delSensor,delMergeControl,multipleCommand,clearData,taskConfig} from "@/api/device/device";
import { selectProductTree } from "@/api/device/deviceProduct";
export default{
  props:{
    deviceId:null,
    types:null 
  },
  name:'DeviceData',
  components:{Icon,lineChart,Treeselect,deviceIcon,deviceLog,deviceTask,gwTask,controlGroup,deviceAlarm,listen,display,event,sensorTask},
  dicts:["notify_model","sensor_trigger_model",'monitor_display_type',"common_status","series_data_type","control_button_display_model",'display_expression'],
  data(){
    return{
      constList:{
        signal:{
          flag:'signal',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        battery:{
          flag:'battery',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        version:{
          flag:'version',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        iccId:{
          flag:'iccId',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        imei:{
          flag:'imei',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        hardwareVersion:{
          flag:'hardwareVersion',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
      },
      pickerOptions: {
        shortcuts: [{
          text: this.$t('deviceData.dateRange.aWeek'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('deviceData.dateRange.aMonth'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('deviceData.dateRange.threeMonth'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      pagerCount:4,
      //设备列表查询参数
      queryParams:{
        pageNum: 1,
        pageSize: 20,
        inline:'',
        name:'',
        deptId: undefined,
        ancestors:null
      },
      //设备列表加载状态
      loadingList:false,
      //设备详情加载状态
      loadingDetail:true,
      //设备数
      total:0,
      //设备列表
      dataList:[],
      //当前选中设备ID
      activeId:'',
      //设备数据
      deviceData:{
        configTask:false,
        deviceExtendList:[]
      },
      //图标弹窗
      open:false,
      //详情弹窗
      detail:false,
      //详情title
      title:'',
      //当前详情tab
      activeName:'',
      //详情table数据
      tableData:{},
      //详情charts数据
      chartData:{
        xData:[],
        yData:[]
      },
      //组
      deptOptions: [],
      deviceTypeList:[],
      filterOpen:false,
      filterForm:{},
      //当前选择的传感器icon
      targetSensorIcon:'',
      //当前操作的sensor
      targetSensor:{},
      //传感器列表
      sensorList:[],
      //控制型传感器列表
      controllerList:[],
      //功能设置型传感器
      setterList:[],
      //传感器数据绑定
      controllerMap:{},
      //固件信息
      firmware:{
        name:"",
        version:""
      },
      //传感器控制loading
      loading:{},
      //数据更新loading
      updateing:false,
      //时间同步loading
      syncing:false,
      //传感器图表查询参数
      chartParams:{
        deviceId:undefined,
        sensorId:undefined,
        startDate:'',
        endDate:''
      },
      chartDataLoading:false,
      //图表时间范围
      chartDateArea:[],
      //设备报警查询参数
      eventParams:{
        deviceId:undefined,
        sensorId:undefined,
      },
      //显示锚点
      showTypes:["first","second",'configTask',"third","fourth"],
      //io列表
      seriesIoList:[],
      seriesIoOpen:false,
      selection:[],
      seriesIoTotal:0,
      controlList:{
        "0":this.$t('deviceData.controlList.sensorParameters'),
        "1":this.$t('deviceData.controlList.controlParameters'),
        "2":this.$t('deviceData.controlList.setupParameters')
      },
      //传感器编辑规则
      seriesRules: {
        name: [
          { required: true, message: this.$t('common.cannotbeempty',{'name':this.$t('deviceData.popup.serialPort')}), trigger: "blur" }
        ],
        flag: [
          { required: true, message: this.$t('common.cannotbeempty',{'name':this.$t('deviceData.popup.serialPortFlag')}), trigger: "blur" }
        ],
        expression: [
          { required: true, message: this.$t('common.cannotbeempty',{'name':this.$t('deviceData.popup.expression')}), trigger: "blur" }
        ],

      },
      //传感器编辑表单
      seriesIoForm:{},
      optionList:[],
      productOptions:null,
      productIds:[],
      //传感器编辑弹窗
      seriesEditOpen:false,
      //设备icon选择弹窗
      deviceIconOpen:false,
      //选中的设备icon
      targetDeviceIcon:'',
      //要修改icon的设备对象
      deviceIconItem:{},
      //组合控制弹窗
      controlGroupPopup:false,
      deviceTaskVisiabled:false,
      gwTaskVisiabled:false,
      configTaskVisiabled:false,
      groupItems:{},
      //倒计时统一对象
      countDownTimers:{},
      durations:{},
      //数据监听
      dataListenPopup:false,
      listenData:'',
      groups:{
        'sjys':'',
        'kzgn':'',
        'gnsz':''
      },
      groupTypes:[
        {
          name:this.$t('deviceData.overview'),
          value:''
        }
      ]
    }
  },
  created(){
    // this.getSensorShowType()
    this.getMonitorDeviceOption(this.deviceId);
    this.showTypes = [this.types]
    // this.getData()
    // this.getTreeselect()
    // this.getDeviceTypeList()
    // this.getFirmwareUpgrade()
    // this.getProductList()
  },
  computed:{
    disabled(){
      return (flag)=>{
        let target = this.deviceData.sensorList.find(i=>i.flag===flag)
        return target?true:false
      }
    },
    getGroupItemValue(){
      return (key,list)=>{
        let target = list.find(i=>i.value==JSON.parse(key).value1)
        if(target&&target.name){
          return target.name
        }
        return ''
      }
    },
    showETH(){
      return (code)=>{
        return code.substring(code.length-4,code.length)==='_ETH'
      }
    },
    returnHMS(){
      return (second)=>{
        let h = parseInt(second / 60 / 60 % 24)
        h = h < 10 ? '0' + h : h
        let m = parseInt(second / 60 % 60)
        m = m < 10 ? '0' + m : m
        let s = parseInt(second % 60)
        s = s < 10 ? '0' + s : s
        return h+':'+m+':'+s
      }
    }
  },
  methods:{
    //获取缓存的显示类型
    getSensorShowType(){
      let session = cache.local.getJSON('devicedata_sensor_showtypes')
      if(session&&session.length>0){
        this.showTypes = session;
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      })
    },
    //设备类型列表
    getDeviceTypeList(){
      this.deviceTypeList = [];
      deviceTypeOptions().then( res => this.deviceTypeList = res.data )
    },
    //查询产品下拉列表
    getProductList(){
      selectProductTree({ancestors:this.deviceData.productAncestors}).then( res => this.productOptions = res.data)
    },
    // getData(){
    //   this.loadingList = true;
    //   listDevice(this.queryParams).then(res=>{
    //     this.dataList = res.rows;
    //     this.total = res.total;
    //     if(this.dataList.length>0){
    //       //alarmUpdate用于设备报警的时候仅刷新列表
    //       this.getMonitorDeviceOption(this.dataList[0].id)
    //     }
    //     setTimeout(()=>{
    //       this.loadingList=false;
    //     },200)
    //   }).catch(e=>{
    //     this.loadingList=false;
    //   })
    // },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getData()
    },
    handleSearch(){
      this.queryParams.pageNum = 1;
      this.getData()
    },
    resetConstList(){
      this.constList = {
        signal:{
          flag:'signal',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        battery:{
          flag:'battery',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        version:{
          flag:'version',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        iccId:{
          flag:'iccId',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        imei:{
          flag:'imei',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
        hardwareVersion:{
          flag:'hardwareVersion',
          show:false,
          updateTime:'',
          value:'',
          name:''
        },
      }
    },
    getMonitorDeviceOption(id){
      //重置计时器
      // this.clearAllTimer();
      this.activeId = id;
      //this.loadingDetail = true;
      getDevice(this.activeId).then(res => {
        //处理设备数据
        this.deviceData = res.data;
        //显示类传感器
        let sensorList = [];
        //控制类传感器
        let controllerList = [];
        //设置类
        let setterList = [];
        this.controllerMap = {};
        //websocket发送当前设备id
        this.$ws.sendWs(id)
        let alarmTotal = this.deviceData.alarmTotal;
        //类型
        this.groups = {
          'sjys':'',
          'kzgn':'',
          'gnsz':''
        }
        this.groupTypes = [
          {
            name:this.$t('deviceData.overview'),
            value:''
          }
        ]
        if(res.data.deviceProductList&&res.data.deviceProductList.length>0){
          let arr =  res.data.deviceProductList.map(el=>{return {name:el.name , value:el.id}})
          this.groupTypes = this.groupTypes.concat(arr)
          console.log(this.groupTypes)
        }
        //传感器分类
        res.data.sensorList.forEach(el=>{
          if(el.sensorType==='1'||el.sensorType==='2'){
            let params = {}
            if(el.flagValue&&typeof(el.flagValue)==='string'){
              params = JSON.parse(el.flagValue)
              if(params.value1&&!params.value2){
                this.$set(this.controllerMap,el.id,params.value1)
              }else if(params.value1&&params.value2){
                this.$set(this.controllerMap,el.id,[params.value1,params.value2])
              }
            }
            if(el.displayModel==='display_time_switch'){
              if(params.time){
                let hms = params.time.split(':')
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth()+1;
                let day = date.getDate();
                let hour = parseInt(hms[0]);
                let min = parseInt(hms[1]);
                let second = parseInt(hms[2]);
                this.$set(this.controllerMap,('time'+el.id),new Date(month,day,year,hour,min,second))
              }
              if(el.running){
                this.$set(this.durations,el.id,parseInt(el.duration))
                setTimeout(()=>{
                  this.setCountDown(el)
                },1000)
              }
            }
            if(el.sensorType==='1'){
              controllerList.push(el)
            }else{
              setterList.push(el)
            }
          }else{
            sensorList.push(el)
          }
          //报警
          // if(el.alarmTotal>0){
          //   alarmTotal+=el.alarmTotal
          // }
        })
        // let target = this.dataList.find(i=>i.id===id);
        // this.$set(target,'alarmTotal',alarmTotal);

        this.sensorList = sensorList;
        this.controllerList = controllerList;
        this.setterList = setterList;


        //重置全部固定类型的显示信息
        this.resetConstList();
        //重新赋值固定类型的显示信息
        this.deviceData.deviceExtendList.forEach(el=>{
          let target = this.constList[el.flag]
          if(target&&target.flag){
            let obj = JSON.parse(JSON.stringify(el))
            obj.show = true;
            this.$set(this.constList,el.flag,obj)
          }
        })
        setTimeout(()=>{
          //this.loadingDetail = false;
        },200)
        this.getProductList()
      }).catch(e=>{
        //this.loadingDetail = false;
      });
    },
    onSensorIconChange(value){
      console.log(value)
      this.targetSensorIcon = value;
    },
    selectSensorIcon(item){
      this.targetSensor = item;
      this.targetSensorIcon = item.icon;
      this.open = true;
    },
    handleSensorIconSelect(){
      if(this.targetSensorIcon){
        let params = JSON.parse(JSON.stringify(this.targetSensor))
        params.icon = this.targetSensorIcon;
        updateSensor(params).then(res=>{
          this.getMonitorDeviceOption(this.activeId)
          this.open = false;
        })
      }
    },
    resetQueryParams(){
      this.eventParams.deviceId = '';
      this.eventParams.sensorId = '';
    },
    //传感器详情
    showDetail(row){
      // if(row.children&&row.children.length>0){
      //   return
      // }
      this.title = row.name;
      this.tableData = row;
      if(this.tableData.ancestors) this.productIds = this.tableData.ancestors.split(',')
      this.resetQueryParams();
      //获取图表数据
      this.chartParams.deviceId = row.deviceId;
      this.chartParams.sensorId = row.id;
      //报警数据
      this.eventParams.deviceId = row.deviceId;
      this.eventParams.sensorId = row.id

      this.activeName = 'second'
      this.detail = true;

    },
    //传感器操作
    comfirmClick(item,value){
      //
      let params = {
        "cmdFlag":item.flag,
        "id":item.id,
        "deviceId":item.deviceId,
        "param":{}  // 时间区间2个值，其他目前1个值
      }
      if(item.displayModel==='time_interval'){
        //时间区间
        if(this.controllerMap[item.id]&&this.controllerMap[item.id].length===2){
          // console.log(this.controllerMap[item.id])
          params.param.value1 = this.controllerMap[item.id][0]
          params.param.value2 = this.controllerMap[item.id][1]
        }else{
          this.$message.error(this.$t('deviceData.dateRange.timeInterval'));
          return
        }
      }else if(item.displayModel==='control_ratio'){
        //单选
        this.$set(this.controllerMap,item.id,value)
        params.param.value1 = this.controllerMap[item.id]
      }else if(item.displayModel==='control_slider'){
        //滑块
        params.param.value1 = this.controllerMap[item.id]
      }else if(item.displayModel==='control_btn'){
        //按钮
        params.param = {};
      }else if(item.displayModel==='custom_btn'){
        //输入框
        if(!this.controllerMap[item.id]){
          this.$message.error(this.$t('deviceData.prompt.enterValue'));
          return
        }
        params.param.value1 = this.controllerMap[item.id]
      }else if(item.displayModel==='display_time_switch'){
        //倒计时
        if(!this.controllerMap['time'+item.id]){
          this.$message.error(this.$t('deviceData.prompt.selectDuration'));
          return
        }
        this.$set(this.controllerMap,item.id,value)
        params.param.time = this.parseTime(this.controllerMap['time'+item.id]).substring(11,19)
        params.param.value1 = this.controllerMap[item.id]
        console.log( this.controllerMap[item.id])
      }
      this.handleCommit(params)
    },
    handleCommit(params){
      this.$set(this.loading,params.id,true)
      deviceCommand(params).then(res=>{
        this.$set(this.loading,params.id,false)
        if(res.success){
          this.$message.success(this.$t('common.successful'))
        }
        this.getMonitorDeviceOption(this.activeId)
      }).catch(err=>{
        this.$set(this.loading,params.id,false)
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    //更新数据
    updateDeviceData(){
      this.$set(this.loading,this.deviceData.id,true)
      getDeviceData(this.deviceData.id).then(res=>{
        this.loading[this.deviceData.id] = false;
        if(res.success){
          this.$message.success(this.$t('common.successful'))
        }
        this.getMonitorDeviceOption(this.activeId)
      }).catch(err=>{
        this.loading[this.deviceData.id] = false;
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    //更新数据
    updateConfigTask(){
      this.$set(this.loading,this.deviceData.id,true)
      taskConfig(this.deviceData).then(res=>{
        this.loading[this.deviceData.id] = false;
        if(res.success){
          this.$message.success(this.$t('common.successful'))
        }
        this.getMonitorDeviceOption(this.activeId)
      }).catch(err=>{
        this.loading[this.deviceData.id] = false;
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    //查看当前版本
    getFirmwareUpgrade(){
      firmwareUpgrade().then(res=>{
        this.firmware = res.data||{};
      })
    },
    //升级
    handleUpgrade(){
      this.updateing = true;
      let params = {
        "deviceId":this.deviceData.id,
        "upgradeId":this.firmware.id
      }
      upgrade(params).then(res=>{
        this.$message.success(this.$t('common.successful'))
        this.updateing = false;
      }).catch(e=>{
        this.updateing = false;
      })
    },
    //时间同步
    handleSyncTime(){
      this.syncing = true;
      syncDeviceTime(this.deviceData.id).then(res=>{
        this.syncing = false;
        if(res.success){
          this.$message.success(this.$t('common.successful'))
        }
      }).catch(e=>{
        this.syncing = false;
      })
    },
    //下载趋势图内容
    downloadTrendData(){
      if(this.chartDateArea&&this.chartDateArea.length>0){
        this.chartParams.startDate = this.parseTime(this.chartDateArea[0],'{y}-{m}-{d}')+' 00:00:00'
        this.chartParams.endDate = this.parseTime(this.chartDateArea[1],'{y}-{m}-{d}')+' 23:59:59'
      }else{
        this.chartParams.startDate = '';
        this.chartParams.endDate = '';
      }
      this.download('/data/sensorData/export', {
        ...this.chartParams
      }, `${this.deviceData.name}-${this.title}.xlsx`)
    },
    //获取传感器图表数据
    getTrendData(){
      this.chartDataLoading = true;
      if(this.chartDateArea&&this.chartDateArea.length>0){
        this.chartParams.startDate = this.parseTime(this.chartDateArea[0],'{y}-{m}-{d}')+' 00:00:00'
        this.chartParams.endDate = this.parseTime(this.chartDateArea[1],'{y}-{m}-{d}')+' 23:59:59'
      }else{
        this.chartParams.startDate = '';
        this.chartParams.endDate = '';
      }
      this.chartData = {
        xData:[],
        yData:[]
      }
      trendData(this.chartParams).then(res=>{
        this.chartDataLoading = false;
        let xData = [];
        let yData = [];
        res.forEach(el=>{
          xData.push(el.createTime)
          yData.push(el.displayValue)
        })
        this.chartData = {
          xData,yData
        }
      }).catch(()=>{
        this.chartDataLoading = false;
      })
    },
    handleDeleteDeviceSensor(control){
      let device = this.deviceData;
      this.$modal.confirm(
        this.$t('deviceData.prompt.cleanSensorData',{'name':this.deviceData.name}),
        this.$t('common.prompt'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
        }
      ).then(() => {
        this.getMonitorDeviceOption(device.id);
        this.$message.success(this.$t('common.successful'))
      }).catch(() => {});
    },
    //修改传感器名称
    editSensorName(data){
      this.$set(this.controllerMap,'name'+data.id,data.name)
    },
    cancelEditName(data){
      this.$set(this.controllerMap,'name'+data.id,null)
    },
    confirmSensorName(data){
      if(!this.controllerMap['name'+data.id]){
        this.$message.error(this.$t('common.nameInputHint'))
        return
      }
      let params = JSON.parse(JSON.stringify(data))
      params.name = this.controllerMap['name'+data.id];
      updateSensor(params).then(res=>{
        this.$message.success(this.$t('common.successful'))
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    confirmDeviceName(data){
      if(!this.controllerMap['name'+data.id]){
        this.$message.error(this.$t('common.nameInputHint'))
        return
      }
      let params = JSON.parse(JSON.stringify(data))
      params.name = this.controllerMap['name'+data.id];
      updateDevice(params).then(res=>{
        let index = this.dataList.findIndex(i=>i.id===params.id);
        this.$set(this.dataList[index],'name',params.name)
        this.controllerMap = {}
        this.$message.success(this.$t('common.successful'))
      })
    },
    //添加传感器
    handleAddSensor(control,seriesId,deviceTypeId){
      //获取串口io列表
      this.selection = [];
      seriesIoOptions({"control":control,"seriesId":seriesId,"deviceTypeId":deviceTypeId}).then(response => {
        let arr = [];
        response.data.forEach(el=>{
          let target = this.deviceData.sensorList.find(i=>i.flag===el.flag)
          if(!target){
            arr.push(el)
          }
        })
        this.seriesIoList = arr;
        this.seriesIoOpen = true;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    toggleSelection(rows) {
      this.$refs.multipleTable.toggleRowSelection(rows);
    },
    handleSelectSensor(){
      let params = {
        id:this.deviceData.id,
        flags:this.selection.map(i=>i.flag)
      }
      bindControlSensor(params).then(res=>{
        this.$message.success(this.$t('common.successful'))
        this.getMonitorDeviceOption(this.activeId)
        this.seriesIoOpen = false;
      })
    },
    handleEditSensor(data){
      this.seriesIoForm = JSON.parse(JSON.stringify(data));
      this.optionList = JSON.parse(JSON.stringify(data.commandList));
      this.seriesEditOpen = true;
    },
    handleSaveSensor(){
      this.seriesIoForm.commandList = this.optionList;
      if(this.productIds) this.seriesIoForm.productCode = this.productIds[this.productIds.length -1]
      if(this.productIds) this.seriesIoForm.ancestors = this.productIds.join(',')
      updateSensor(this.seriesIoForm).then(res=>{
        this.$message.success(this.$t('common.successful'))
        this.seriesEditOpen = false;
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    addOption(){
      this.optionList.push({
        id:null,
        name:'',
        value:'',
        expression:'EQ'
      })
      this.$nextTick()
    },
    delOption(index,row){
      this.optionList.splice(index,1)
    },
    //删除传感器
    handleDelSensor(data){
      delSensor(data.id).then(res=>{
        this.detail = false;
        this.$message.success(this.$t('common.successful'))
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    //选择设备icon
    selectDeviceIcon(item){
      this.deviceIconItem = item
      this.targetDeviceIcon = item.icon||item.typeIcon;
      this.deviceIconOpen = true;
    },
    onDeviceIconChange(value){
      console.log(value)
      this.targetDeviceIcon = value;
    },
    handleDeviceIconSelect(){
      if(this.targetDeviceIcon){
        let params = this.deviceIconItem
        params.icon = this.targetDeviceIcon;
        updateDevice(params).then(res=>{
          this.deviceIconOpen = false;
        })
      }
    },
    resetTooltip(){
      // let doms = document.querySelectorAll('.el-popover')
      // doms.forEach(el=>{
      //   el.style.display = 'none'
      // })
    },
    //配置组合控制
    setControlGroup(){
      this.groupItems = {};
      this.controlGroupPopup = true;
    },
    onSelectGroupSuccess(){
      this.$message.success(this.$t('common.successful'))
      this.controlGroupPopup = false;
      this.getMonitorDeviceOption(this.activeId)
    },
    delGroupItem(item){
      this.$modal.confirm('是否确认删除该组合控制？').then(function() {
        return delMergeControl(item.id);
      }).then(() => {
        this.getMonitorDeviceOption(this.activeId);
        this.$message.success(this.$t('common.successful'))
      }).catch(() => {});
    },
    editGroupItem(item){
      this.groupItems = item;
      this.controlGroupPopup = true;
    },
    handleGroupSubmit(item){
      let arr = [];
      item.mergeSensorVos.forEach(el=>{
        arr.push({
          cmdFlag: el.sensorVo.flag,
          deviceId:el.sensorVo.deviceId,
          id: el.sensorVo.id,
          param: JSON.parse(el.flagValue)
        })
      })
      let params = {
        deviceId:item.deviceId,
        commandList:arr
      }
      this.$set(this.loading,item.id,true)
      multipleCommand(params).then(res=>{
        this.loading[item.id] = false;
        this.$message.success(this.$t('common.successful'))
        this.getMonitorDeviceOption(this.activeId)
      }).catch(err=>{
        this.loading[item.id] = false;
        this.getMonitorDeviceOption(this.activeId)
      })
    },
    //清除传感器数据
    handleClearData(data){
      this.$modal.confirm(this.$t('deviceData.prompt.cleanSensorData',{'name':data.name})).then(function() {
        return clearData(data.id);
      }).then(() => {
        this.getMonitorDeviceOption(this.activeId);
        this.$message.success(this.$t('common.successful'))
        this.detail = false;
      }).catch(() => {});
    },
    cancelGroupSelect(){
      this.controlGroupPopup = false;
    },
    toDeviceDetail(data){
      console.log(data)
      this.$router.push({
        path:'/deviceData/'+data.name,
        params:{
          name:data.name
        },
        query:{
          id:data.id
        }
      })
    },
    //设置倒计时
    setCountDown(item){
      let duration = this.durations[item.id]
      this.$set(this.durations,item.id,duration-1)
      if(this.durations[item.id]&&this.durations[item.id]>0){
        this.countDownTimers[item.id]&&clearTimeout(this.countDownTimers[item.id])
        this.countDownTimers[item.id] = setTimeout(()=>{
          this.setCountDown(item)
        },1000)
      }else{
        //重置剩余时长
        this.$set(this.durations,item.id,0)
        //重置定时器
        this.countDownTimers[item.id]&&clearTimeout(this.countDownTimers[item.id])
        this.countDownTimers[item.id] = null;
        //需要延迟两秒后再请求数据
        setTimeout(()=>{
          this.getMonitorDeviceOption(this.activeId)
        },2000)
      }
    },
    clearAllTimer(){
      //重置数秒记录
      this.durations = {};
      //清空定时器
      for(let i in this.countDownTimers){
        if(this.countDownTimers[i]){
          clearTimeout(this.countDownTimers[i])
          this.$set(this.durations,i,null)
        }
      }
    },
    openDeviceTask(){
      this.deviceTaskVisiabled = true
    },
    onSelectDeviceTask(optList){
      console.log(optList)
      this.optionList = optList;
      this.seriesIoForm.commandList = optList;
      this.deviceTaskVisiabled = false
    },
    cancelDeviceTask(){
      this.deviceTaskVisiabled = false
    },
    openGwTask(){
      this.gwTaskVisiabled = true
    },
    onSelectGwTask(obj){
      this.optionList = obj.commandList;
      this.seriesIoForm.commandList = obj.commandList;
      this.seriesIoForm.valueExpression = obj.valueExpression;
      this.gwTaskVisiabled = false
    },
    cancelGwTask(){
      this.gwTaskVisiabled = false
    },
    monitor(data){
      this.queryParams.ancestors = data.ancestors
      this.getData()
    },
    handleFilter(){
      this.filterOpen = true
    },
    submitFilterForm(){
        this.$refs["filterForm"].validate(valid => {
        if (valid) {
            this.queryParams.deviceTypeId = this.filterForm.deviceTypeId
            this.handleSearch()
            this.filterOpen = false;
        }
      });
    },
    // 取消按钮
    cancelFilter() {
      this.resetFilterForm();
      this.queryParams.deviceTypeId = ""
      this.handleSearch()
      this.filterOpen = false;
    },
    // 表单重置
    resetFilterForm() {
      this.filterForm = {
        deviceTypeId: null,
      };
    },
  },
  watch:{
    // 'queryParams.deptId'(v){
    //   if(v==null){
    //     this.queryParams.ancestors = null ;
    //     this.getData()
    //   }
    // },
    detail(v){
      if(!v){
        this.activeName = '';
        this.chartParams = {
          deviceId:undefined,
          sensorId:undefined,
          startDate:'',
          endDate:''
        }
        this.eventParams.deviceId = '';
        this.eventParams.sensorId = ''
      }
    },
    activeName(v){
      if(!v){
        return
      }
      if(v==='first'){
        //this.getTrendData()
      }else if(v==='second'){
        if(this.tableData.sensorType==='1'||this.tableData.sensorType==='2'){
          //控制器日志

        }else{
          //图表数据，默认查询最近一周
          const end = new Date();
          const start = new Date().getTime() - 3600 * 1000 * 24 * 7;
          this.chartDateArea = [start,end];
          this.getTrendData()
        }
      }else if(v==='third'){

      }else if(v==='fourth'){

      }else if(v==='fifth'){
        
      }else if(v === 'configTask'){
        this.configTaskVisiabled = true ;
      }
    },
    showTypes(v){
      // cache.local.setJSON('devicedata_sensor_showtypes',v)
    },
    '$store.getters.wsdata'(v){
      //监听websocket数据变化
      if(v[0]!=='{'||v[v.length-1]!=='}'){
        return
      }
      let data = JSON.parse(v);
      if(data.event==='Alarm'){
        console.log('Alarm')
        //设备报警
        let alarmData = JSON.parse(data.message);
        //设置列表的报警状态
        let target = this.dataList.find(i=>i.id===data.deviceId);
        if(target){
          this.$set(target,'alarmTotal',1)
        }
        //刷新当前
        if(data.deviceId===this.activeId){
          this.getMonitorDeviceOption(this.activeId)
        }
        this.$notify({
          title: alarmData.deviceName+'→'+alarmData.name,
          type: 'warning',
          duration:0,
          position: 'bottom-right',
          message: alarmData.content
        });
      }else if(data.event==='Refresh'){
        //
        console.log('Refresh')
        if(data.deviceId===this.activeId){
          this.getMonitorDeviceOption(this.activeId)
        }
      }else if(data.event==='Monitor'){
        if(data.message.length>0){
          if(data.message[0]==='{'&&data.message[data.message.length-1]==='}'){
              let json = JSON.parse(data.message);
              let arr = [];
              for(let i in json){
                if(i!=='topic'){
                  let value = json[i].replace(/^(?:[\n\r]*)|(?:[\n\r]*)$/g, '')
                  arr.push('receive : "'+value+'"\n')
                }
              }
              this.listenData = arr.join('')+'\n'
            }else{
              this.listenData = this.listenData+data.message+'\n'
            }
          }
        }
    }
  }
}

</script>


<style lang="scss" scoped >
::-webkit-scrollbar {
  width: 0;
  display: none;
}
.device-data{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eee;
  display: flex;
  flex-wrap: nowrap;
  align-items: top;
  .left-data{
    width: 470px;
    flex: 0 0 auto;
    height: calc(100vh - 84px);
    background-color: #fff;
    padding-right: 8px;
    .device-search{
      margin: 10px 0;
      .search-item{
        width: 180px;
        margin: 0 2px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .device-list{
      height: calc(100% - 150px);
      overflow-y: auto;
      .device-item{
        position:relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 458px;
        padding: 6px 0px;
        height:70px;
        margin: 5px auto;
        border-radius: 10px;
        cursor: default;
        box-sizing: content-box;
        .edit-icon{
          margin-left: 5px;
          cursor: pointer;
        }
        .alarm-icon{
          width: 15px;
          height: 15px;
          font-size:20px;
          fill:currentColor;
          color:rgb(243, 56, 56);
        }
        &.active{
          background-color: #f5f7fa;
        }
        &:hover{
          background-color: #f5f7fa;
        }
        .device-icon{
          flex: 0 0 auto;
          display: flex;
          width: 35px;
          height: 35px;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          margin-left: 15px;
        }
        .device-info{
          flex: 1;
          width: 100%;
          .device-name{
            color: #03C2C2;
            font-size: 15px;
          }
          .device-code{
            color: #222;
            font-size: 10px;
          }
          .device-address{
            color: #222;
            font-size: 10px;
            // white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .device-opt{
          flex:0 0 auto;
          width:100px;
          height: 100%;
          display:flex;
          flex-direction: column;
          padding: 0 10px 0 36px;
          box-sizing: content-box;
          >div{
            height: 50%;
            text-align: right;
          }
          .signal{
            width: 40px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            >div{
              width: 6px;
              border: 1px solid #03C2C2;
              display: inline-block;
              margin: 0 1px;
              vertical-align: bottom;
              // background-color: red;
              &:nth-child(1){
                height: 6px;
              }
              &:nth-child(2){
                height: 11px;
              }
              &:nth-child(3){
                height: 15px;
              }
              &:nth-child(4){
                height: 19px;
              }
            }
          }
          .eth{
            width: 40px;
            height: 26px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            .eth-icon{
              width: auto;
              height: 100%;
            }
          }
          .battery{
            position: relative;
            width: 38px;
            height: 22px;
            display: inline-block;
            vertical-align: middle;
            border:1px solid #303133;
            border-radius: 3px;
            text-align: center;
            font-size: 12px;
            line-height: 22px;
            margin-left: 12px;
            .plug-icon{
              width: auto;
              height: 100%;
            }
            &::after{
              content: "";
              width: 2px;
              position: absolute;
              top: 3px;
              right: -3px;
              background: #303133;
              height: 12px;
            }
            .full-state{
              position: absolute;
              height: 100%;
              background-color: rgba(3, 194, 194,0.4);
              border-radius: 3px;
              transition-duration: 2s;
            }
          }
          .plug-box{
            position: relative;
            width: 38px;
            height: 22px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 3px;
            text-align: center;
            font-size: 12px;
            line-height: 22px;
            margin-left: 12px;
            .plug-icon{
              width: auto;
              height: 100%;
            }
          }
          button{
            width: 40px;
            height: 24px;
            margin: 0;
            padding: 5px 9px;
          }
        }
      }
    }
  }
  .right-data{
    position: relative;
    flex: 1;
    background-color: #fff;
    height: calc(100vh - 230px);
    overflow-y: auto;
    // padding-bottom: 200px;
    .main-box{
      padding: 0px 8px 20px 0;
      .device-infos{
        display: flex;
        flex-wrap: wrap;
        .info-item{
          margin-bottom: 20px;
          font-size: 16px;
          margin-right: 220px;
        }
      }
      .part-title{
        // margin-left: 1.2em;
        color: #03C2C2;
        font-size: 16px;
        font-weight: bold;
        .state{
          font-size: 13px;
          margin-left: 5px;
          font-weight: 400;
        }
        .add-sensor-btn{
          margin-left: 10px;
          background-color: #03C2C2;
          color: #fff;
          font-size: 8px;
          vertical-align: middle;
          padding: 3px !important;
          display: inline-block;
          margin-top: -4px;
        }
        .rem-sensor-btn{
          margin-left: 10px;
          background-color: #03C2C2;
          color: #fff;
          font-size: 14px;
          vertical-align: middle;
          padding: 1px !important;
          display: inline-block;
          margin-top: -4px;
        }
      }
      .sensor-list{
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .sensor-item{
          position:relative;
          width: 32%;
          flex: 0 0 auto;
          display: flex;
          flex-direction: column;
          height: 110px;
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 10px;
          margin: 5px 0.5%;
          cursor: pointer;
          .alarm-icon{
            width: 15px;
            height: 15px;
            position: absolute;
            fill:currentColor;
            color:rgb(243, 56, 56);
            font-size: 20px;
            right: 10px;
            top: 5px;
          }
          &.add{
            width: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 45px;
            color: #ccc;
          }
          &.small{
            width: 48.5%;
          }
          &.middle{
            width: 65%;
          }
          &.big{
            width: 100%;
            height: auto;
            .sensor-item{
              width:18.5%;
              height: 90px;
            }
          }
          &:hover{
            background-color: #f5f7fa;
          }
          &.wrap-type{
            width: 98%;
            height: auto;
            >.item-value{
              height: auto;
              min-height: 110px;
              margin: 10px 0;
              flex-wrap: wrap;
              justify-content: flex-start;
              .item-msg{
                color: #666;
              }
              .item-unit{
                font-size: 15px;
                padding-top: 5px;
              }
            }
          }
          .item-info{
            display: flex;
            flex-wrap: nowrap;
            .item-icon{
              flex: 0 0 auto;
              width: 30px;
              height: 30px;
            }
            .item-msg{
              padding-left: 10px;
              font-size: 14px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .tips{
              line-height: 30px;
              margin-left: 5px;
              color: #ccc;
              font-size: 20px;
            }
          }
          .item-value{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            height: 40px;
            color: #03C2C2;
            font-weight: 500;
            align-items: center;
            text-align: center;
            line-height: 22px;
            .value-unit{
              color:#222;
              vertical-align: middle;
              font-size: 20px;
              margin: 0 5px;
            }
            .item-unit{
              font-size: 18px;
              font-weight: 500;
              padding-left: 3px;
              padding-top: 5px;
            }
            .active-btn{
              background-color: #03C2C2;
              color: #fff;
            }
            .tips{
              margin-left: 5px;
              color: #ccc;
              font-size: 20px;
            }
          }
          .item-desc{
            font-size: 12px;
            line-height: 20px;
            .countdown{
              display:flex;
              margin-top:10px;
              color:#222;
              font-weight:bold;
              font-size:14px;
              .count-style{
                flex:1;
                margin-left:5px;
                .count-style-inner{
                  height:100%;
                  background:#03C2C2;
                }
              }
            }
          }
          .item-wrap-btn{
            text-align: right;
            .active-btn{
              background-color: #03C2C2;
              color: #fff;
            }
          }
          .items-wrap{
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
          }
        }
      }
    }
    .link-btns{
      position: fixed;
      right: 20px;
      top: 90px;
      border-radius: 5px;
      overflow: hidden;
      z-index: 10;
      font-weight: bold;
    }
  }

  .alarming{
    animation: alarming 1s linear infinite;
  }
  @keyframes alarming {
    from{
      background-color: #fff;
    }
    0%{
      background-color: #fff;
    }
    50%{
      background-color: rgb(247, 208, 208);
    }
    100%{
      background-color: #fff;
    }
  }
  .popup-table{
    width: 100%;
    .table-row{
      display: flex;

    }
  }
  .add-btn{
    margin-top: 10px;
  }
}
::v-deep .el-popconfirm .el-popconfirm__main{
  padding-bottom: 10px;
}
::v-deep .el-checkbox-button__inner{
  font-weight: bold;
  font-size: 14px;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color:#03C2C2;;
}
::v-deep .vue-treeselect__control{
  font-size: 13px;
}
::v-deep .vue-treeselect__menu{
  font-size: 13px;
  font-weight: 100 !important;
  color: #222;
}
::v-deep .el-tabs__item.is-active{
  color:rgb(73,178,82);
}
::v-deep .el-tabs__active-bar{
  background-color:rgb(73,178,82);
  }
::v-deep .el-tabs__item:hover{
  color:rgb(73,178,82);
}
::v-deep .item-msg button{
  font-size: 15px;
  color: #222;
  &:hover{
    background-color: #fff;
  }
}
::v-deep .item-msg .el-input-group__append{
  overflow: hidden;
}
</style>

<style lang="scss">
  .el-popconfirm__action{
    margin-top: 15px !important;
  }
  @media screen and (min-width: 500px) and (max-width: 1300px) {
    .sensor-item{
      &.middle{
        width: 100% !important;
      }
    }
  }
</style>
